<template>
  <div ref="echartDom"></div>
</template>

<script setup>
import {ref, defineProps, onMounted, onUnmounted, inject, shallowRef, defineExpose} from 'vue'
import {pxToRem} from "@/utils/index";

const echarts = inject('echarts');
const props = defineProps({
  barData: {
    type: Object,
    default: () => {
    }
  }
});

const echartDom = ref(null);
const myChart = shallowRef(null);

const initEchart = () => {
  if (echartDom.value) {
    myChart.value = echarts.init(echartDom.value);
    let option = {
      title: {
        text: '各年龄买房人群统计',
        textStyle: {
          color: 'white',
          fontSize: pxToRem(14),
          fontWeight: 'normal'
        }
      },
      barMaxWidth: pxToRem(11),
      color: {
        type: 'linear',
        // x=0,y=1,柱子的颜色在垂直方向渐变
        x: 0,
        y: 1,
        colorStops: [
          // 0%处的颜色
          {
            offset: 0,
            color: '#12c2e9',
          },
          // 50%处的颜色
          {
            offset: 0.5,
            color: '#c471ed',
          },
          // 100%处的颜色
          {
            offset: 1,
            color: '#f64f59',
          },
        ],
        global: false // 缺省为 false
      },
      legend: {
        x: 'right',
        icon: 'rect',
        itemWidth: pxToRem(10),
        itemHeight: pxToRem(10),
        textStyle: {
          color: 'white',
          fontSize: pxToRem(12)
        },
        data: [
          {
            name: '全部',
            itemStyle: {
              color: '#00FBFF'
            }
          },
          {
            name: '已购房',
            itemStyle: {
              color: '#E65992'
            }
          },
        ]
      },
      grid: {
        left: 0,
        right: 0,
        bottom: 0,
        top: '13%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        data: props?.barData?.xAxisData,
        axisTick: {
          show: false // 不显示坐标轴刻度线
        },
        axisLine: {
          show: false, // 不显示坐标轴线
        },
        splitLine: {
          show: false // 不显示网格线
        },
        axisLabel: {
          color: 'white',
          fontSize: pxToRem(12),
          interval: 0
        }
      },
      yAxis: {
        min: 0,
        max: (value) => value.max || 200,
        axisTick: {
          show: false // 不显示坐标轴刻度线
        },
        axisLine: {
          show: false, // 不显示坐标轴线
        },
        splitLine: {
          show: false // 不显示网格线
        },
        axisLabel: {
          fontSize: pxToRem(12),
          color: 'white'
        }
      },
      series: [
        {
          data: props?.barData?.seriesData[0],
          type: 'bar',
          stack: 'a',
          name: '全部',
          showBackground: true,
          backgroundStyle: {
            color: 'rgba(8,170,255,0.4)',
            borderRadius: [pxToRem(50), pxToRem(50), 0, 0]
          },
          itemStyle: {
            borderRadius: [pxToRem(50), pxToRem(50), 0, 0],
            color: '#00FBFF'
          }
        },
        {
          data: props?.barData?.seriesData[1],
          type: 'bar',
          stack: 'b',
          name: '已购房',
          barGap: '-100%',
          showBackground: true,
          backgroundStyle: {
            color: 'rgba(8,170,255,0.4)',
            borderRadius: [pxToRem(50), pxToRem(50), 0, 0]
          },
          itemStyle: {
            borderRadius: [pxToRem(50), pxToRem(50), 0, 0],
            color: '#E65992'
          }
        }
      ]
    }
    option && myChart.value.setOption(option, true);
  }
}

const updateChart = () => {
  if (myChart.value) {
    myChart.value.dispose(); // 销毁旧图表实例
  }
  initEchart();
};

const disposeChart = () => { // 销毁旧图表实例
  if (myChart.value) {
    myChart.value.dispose(); // 销毁旧图表实例
  }
}

defineExpose({
  updateChart,
  disposeChart
})

onMounted(() => {
  initEchart();
  window.addEventListener("resize", updateChart);
})

onUnmounted(() => {
  window.removeEventListener("resize", updateChart);
})
</script>

<style scoped lang="less">
.h132 {
  height: 132px;
}
.h293 {
  height: 293px;
}
</style>